<template>
  <div class="chat_list-panel" id="chat-list-body">
   <HeaderImg title="消息"></HeaderImg>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div id="chat_list-panel">
      <ul class="mui-table-view" :style="chatListList.length == 0 ? 'display:none' : ''">
        <li
          v-for="(chatItem,index) in chatListList"
          v-if="chatListList.length != 0"
          class="mui-table-view-cell mui-transitioning chat-li"
        >
          <div class="mui-slider-right mui-disabled">
            <a class="mui-btn mui-btn-grey" style="transform: translate(0px, 0px);">顶置</a>
            <a class="mui-btn mui-btn-red" style="transform: translate(-88px, 0px);">删除</a>
          </div>
          <div
            @click="goChatPanel(chatItem.friend_target,chatItem.chat_list_id)"
            class="mui-slider-handle"
            style="transform: translate(0px, 0px);"
          >
            <div class="mui-table-cell chat-item-panel">
              <div class="chat-item-header">
                <img :src="chatItem.user_header" />
              </div>
              <div class="chat-item-content">
                <span class="chat-item-content-name">{{ chatItem.friend_alias }}</span>
                <span class="chat-item-content-detail" v-if="chatItem.chat_mod == 1">{{ chatItem.chat_content }}</span>
                <span class="chat-item-content-detail" v-else-if="chatItem.chat_mod == 2">[express]</span>
                <span class="chat-item-content-detail" v-else-if="chatItem.chat_mod == 3">[图片]</span>
              </div>
              <div class="chat-item-right">
                <span class="chat-item-time">{{ chatItem.push_time }}</span>
                <span class="mui-badge mui-badge-danger" v-if="chatItem.chat_num > 0">{{ chatItem.chat_num }}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    </van-pull-refresh>
    
     <footerNav active="0"></footerNav>
  </div>
</template>
<script>
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";
Vue.use(Tabbar).use(TabbarItem);
import axios from "axios";
import { api } from "../assets/js/api";
import { Toast } from "vant";
import { WebSocketServer } from "../assets/js/websocket";
import { log } from 'util';
import { PullRefresh } from 'vant';
Vue.use(PullRefresh);
export default {
  data() {
    return {
      user_header: "",
      active: 0,
      chatListList: [],
      isLoading : false
    };
  },
  methods: {
    goAddFriend: function() {
      this.$router.push({ path: "/AddFriend" });
    },
    toMyData: function() {
      this.$router.push({ path: "Account" });
    },
    goChatPanel: function(friend_id, chat_list_id) {
      axios({
        url: api.chat.readChat,
        method: "post",
        data: {
          chat_list_id: chat_list_id
        }
      }).then(res => {
        res = res.data;
        if (res.code) {
          this.$router.push({
            path: "/Chat",
            query: {
              friend_id: friend_id
            }
          });
        }
      });
    },
    initChatList: function() {
      axios({
        url: api.chat.getChatList,
        method: "post"
      }).then(res => {
        this.chatListList = res.data.data;
      });
    },
    updateChatList : function(){
      axios({
        url: api.chat.getChatList,
        method: "post"
      }).then(res => {
        // this.chatListList = JSON.parse(JSON.stringify(this.chatListList));
        res = res.data.data;
        for(var key in res){
          this.$set(this.chatListList, key, res[key]);
        }
        console,log(this.chatListList);
      });
    },
    initWebSocket: function() {
      var _this = this;
      WebSocketServer.onMessage(function(response) {
        var res = JSON.parse(response.data);
        if (res.action == "UserChat") {
          _this.updateChatList();
        }
      });
    },
    onRefresh : function(){
      this.isLoading = false;
    },
  },
  
  created() {
    var user = localStorage.getItem("Now_User"); // Cookies.get("Now_User");
    if(user == null){
      Toast("请登录");
      this.$router.push({path : "/login"});
      return;
    }
    user = JSON.parse(user);
    this.user_header = user.user_header;
    this.initChatList();
    this.initWebSocket();
   
  }
};
</script>
<style>
#chat_list-panel .chat-item-content-detail {
  display: block;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>